<template>
	<view class="overPath_container">
		<u-navbar leftText="返回" title="行程结束" placeholder safeAreaInsetTop></u-navbar>
		<!-- 行程结束提示 -->
		<u-notice-bar :text="ScrollText"></u-notice-bar>
		<view class="map_navigation">
			<!-- 标记点 ：  markers -->
			<map id="navMap" class="map" :enable-traffic="true" show-location :enable-poi="true" :enable-scroll="true"
				:polyline="polyline" :markers="initialPoint">
			</map>
		</view>
		<!-- 司机信息 -->
		<view class="dirver">
			<!-- 左侧的司机头像与电话尾号 -->
			<view class="driverImg">
				<view class="driverInfo">
					<!-- 司机头像 -->
					<image :src="driverImg" mode="aspectFit"></image>
					<!-- 司机信息 -->
					<view class="driverPhone">{{ driverName | nameHide }}</view>
					<view class="driverPhone">{{ tel | telHide }}</view>
				</view>
			</view>
			<!-- 司机车型与车牌号 -->
			<view class="driverCard">
				<view class="licensePlate">
					<image src="../../static/Accord.png" mode="aspectFit"></image>
					<view class="driverNum">
						<text>车牌号:{{ driverCarNum }}</text>
					</view>
					<view class="relationDriver">
						<image @click="call" src="../../static/tel.png" class="relationImg"></image>
						<image src="../../static/cancel-kefu.png" class="relationImg"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 支付 -->
		<view class="payBox">
			<u-button type="primary" @click="payBtn">支付({{payMoney}})</u-button>
		</view>
		<!-- 支付面板 -->
		<u-popup :show="payShow" :round="10" mode="bottom" @close="close">
			<view class="payView">
				<view class="payView_way" @tap="payWay('支付宝')">
					<image src="../../static/zfb.png" mode="widthFix"></image>
					支付宝
				</view>
				<view class="payView_way" @tap="payWay('微信')">
					<image src="../../static/wx.png" mode="widthFix"></image>
					微信
				</view>
				<view class="payView_way" @tap="payWay('余额')">
					<image src="../../static/余额.png" mode="widthFix"></image>
					余额
				</view>
			</view>
		</u-popup>
		<!-- 提醒订单未支付 -->
		<u-modal :show="TipsShow" :title="title" :content='Tipscontent' @confirm="TipsShow = false"></u-modal>
		<!-- 提示微信支付未开通 -->
		<u-modal :show="WeChatshow" :title="title" :content='WeChatContent' @confirm="WeChatshow = false"></u-modal>
		<!-- 提示乘客是否使用优惠卷 -->
		<u-modal :show="couponsModal" showCancelButton @cancel="cancelCoupons" :title="title" :content='couponsTips'
			@confirm="determineCoupons">
		</u-modal>
		<!-- 优惠卷列表 -->
		<u-action-sheet title="优惠卷" cancelText="取消" @close="userSelectClose" @select="userSelect" :actions="couponsList"
			:show="couponsShow">
		</u-action-sheet>
		<!-- 支付动画 -->
		<u-overlay :show="payanimationShow">
			<view class="warp">
				<u-loading-icon vertical textColor="#72BEF3" color="#72BEF3" size="100" textSize="20" text="支付中"
					:show="payanimationShow">
				</u-loading-icon>
			</view>
		</u-overlay>
		<!-- 提示订单的 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import amap from "../../common/amap-wx.130.js"
	import {
		mapState,
		mapMutations
	} from 'vuex'

	import {
		endPath,
		createordernum
	} from '../../common/utils.js'
	export default {
		data() {
			return {
				navMap: '', // 初始实例化地图对象
				amapPlugin: null, // 插件效果
				gaodeKey: "4412f1a1546136b8476c2c1011cbbad9", //  高德地图申请的key
				ScrollText: '行程结束，请尽快支付费用',
				polyline: [], //路线
				distance: '', //距离
				minute: '', //分钟
				payMoney: '', //费用
				initialPoint: [], //起点与终点
				points: [], // 缩放视野---记录起点和终点
				tel: '', //司机电话
				driverName: '', //司机姓名
				driverImg: '', //司机头像
				driverCarNum: '', //司机车牌号
				payShow: false, //支付面板显示与隐藏
				title: '提示', //标题
				TipsShow: false, //提醒用户订单未付款显示与隐藏
				Tipscontent: '订单未支付，请尽快支付',
				WeChatContent: '微信支付未开通，请到官网查看详情',
				WeChatshow: false, //提示用户微信显示与隐藏
				couponsShow: false, //用户的优惠卷列表  显示与隐藏
				couponsList: [], //优惠卷列表
				couponsModal: false, ////提示用户是否使用优惠卷显示与隐藏
				couponsTips: '是否使用优惠卷', //提示用户是否使用优惠卷
				payanimationShow: false, //支付动画
			}
		},
		computed: {
			...mapState('userInfo', ['orderInfo', 'userSocketID', 'couponsInfo'])
		},
		onLoad() {
			// 高德地图sdk的获取
			this.amapPlugin = new amap.AMapWX({
				key: this.gaodeKey
			})
			// 实例化地图对象
			this.navMap = uni.createMapContext("navMap", this)
			console.log('订单信息++++++:', this.orderInfo, this.userSocketID, 94)
		},
		onShow() {
			this.$nextTick(() => {
				// 头像
				this.driverImg = this.orderInfo.driverPhoto
				// 姓名
				this.driverName = this.orderInfo.driverName.toString()
				// 司机电话
				this.tel = this.orderInfo.userTel.toString()
				// 车牌号
				this.driverCarNum = this.orderInfo.CarNum

				// 订单的行程路线
				this.points = JSON.parse(this.orderInfo['route'])

				// 起点和终点
				this.initialPoint[0] = {
					id: 0,
					longitude: this.points[0].longitude,
					latitude: this.points[0].latitude,
					iconPath: "../../static/起点.png",
					width: 40,
					height: 40
				}
				this.initialPoint[1] = {
					id: 1,
					longitude: this.points[1].longitude,
					latitude: this.points[1].latitude,
					iconPath: "../../static/终点.png",
					width: 40,
					height: 40
				}
				// 缩放地图
				this.navMap.includePoints({
					padding: [90],
					points: this.points
				})
				// 行程路线
				this.amapPlugin.getDrivingRoute(endPath(this.points, this))
			})
		},
		methods: {
			...mapMutations('userLocation', ['getEnd', 'getStart']),
			...mapMutations('userInfo', ['setApliyWay', 'setCouponseInfo']),
			// 拨打司机电话
			call(tel) {
				uni.makePhoneCall({
					phoneNumber: this.tel
				})
			},
			// 支付面板的关闭
			close() {
				this.payShow = false
				this.TipsShow = true
			},
			// 支付方式
			async payWay(way) {
				console.log(way)
				if (way == '支付宝') {
					// 订单编号
					let orderNum = createordernum()
					let data = {
						orderId: orderNum,
						userID: this.userSocketID,
						payMoney: this.payMoney
					}
					const result = await this.$http('/payment', data, "POST")
					if (result.code == 200) {
						// 存放支付宝沙箱地址
						this.setApliyWay(result.result)
						// 跳转携带参数
						uni.navigateTo({
							url: '/subpkg/payWay/payWay'
						})
					}
				} else if (way == '余额') {
					this.payanimationShow = true
					let rusult = await this.$http('/balanceUser', {
						userID: this.userSocketID, //乘客id
						payMoney: this.payMoney, //支付价钱
					})
					console.log(rusult, 221)
					// 支付失败
					if (rusult.payState == false) {
						uni.$showMsg(rusult.message)
						this.payanimationShow = false
						return
					}

					// 修改订单状态
					let obj = {
						type: way, //支付类型
						orderNum: this.orderInfo.ordernum, //订单号
					}
					const orderState = await this.$http('/OrderStateUser', obj, 'POST')
					if (orderState.code !== 200) return console.log('支付失败')

					// 改变优惠卷状态
					console.log(this.couponsInfo)
					if (this.couponsInfo) {
						console.log('使用优惠卷')
						const result = await this.$http('/couponsState', {
							// 优惠卷id
							couponsID: this.couponsInfo,
							//乘客id
							userID: this.userSocketID,
						})
						if (result.code !== 200) return console.log('改变优惠卷状态失败')
					} else {
						console.log('没有使用优惠卷')
					}


					// 支付成功
					this.$refs.uToast.show({
						type: 'success',
						message: '支付成功',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					})
					// 清空 仓库地址
					this.getStart('')
					this.getEnd('')
					// 关闭动画
					this.payanimationShow = false
					// 支付成功跳转首页
					uni.redirectTo({
						url: '/pages/home/home'
					})
				} else if (way == '微信') {
					this.WeChatshow = true
				}
			},
			// 支付按钮---先提示用户是否使用你优惠卷
			payBtn() {
				this.couponsModal = true
			},
			// 确定 弹出---优惠卷列表
			async determineCoupons() {
				this.couponsModal = false
				// 查询---->用户的优惠卷的列表
				let result = await this.$http('/selectCopunt', {
					userID: this.userSocketID,
				})
				if (result.code !== 200) return console.log('获取优惠卷列表失败')

				if (result.data.length == 0) {
					this.$refs.uToast.show({
						type: 'info',
						message: '没有可以使用的优惠卷~',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/info.png'
					})
					// 支付类型
					this.payShow = true
					return
				}
				this.couponsList = result.data
				this.couponsShow = true
			},
			//关闭--提示是否使用优惠卷--- 弹出支付类型
			cancelCoupons() {
				// 关闭--提示是否使用优惠卷
				this.couponsModal = false
				this.payShow = true
			},
			// 点击优惠卷的列表
			userSelect(Coupons) {
				console.log(Coupons, 267)
				// 折扣
				let discount = 0 + '.' + Coupons.name.split('折')[0]
				this.payMoney = this.payMoney * discount
				// 存在仓库中
				this.setCouponseInfo(Coupons.id)
				// 提示
				this.$refs.uToast.show({
					type: 'success',
					message: '使用' + Coupons.name,
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				})
				this.payShow = true
			},
			// 点击取消--不用优惠卷
			userSelectClose() {
				this.couponsShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.map_navigation {
		width: 95%;
		height: 600rpx;
		border: 1px solid #F2F5FA;
		border-radius: 10px;
		margin: 5px auto;
		position: relative;

		.map {
			width: 100%;
			height: 100%;
			border-radius: 20px;
		}
	}

	.dirver {
		width: 100%;
		height: 200px;
		display: flex;
		justify-content: space-between;
		padding-left: 20px;
		margin-top: 10px;
		padding-right: 20px;
		box-sizing: border-box;

		.driverImg {
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			margin-right: 5px;
			box-sizing: border-box;

			.driverInfo {
				width: 100%;
				height: 130px;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-sizing: border-box;

				image {
					width: 100px;
					height: 100px;
					margin-top: 5px;
					// margin-bottom: 5px;
					box-sizing: border-box;
				}

				.driverPhone {
					width: 100%;
					padding-left: 10px;
					box-sizing: border-box;
					margin-top: 10px;
					text-align: center;
				}
			}
		}

		.driverCard {
			width: 60%;
			height: 100%;

			.licensePlate {
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 100%;

				image {
					margin-top: 10px;
					height: 100px;
					width: 80%;
				}

				.driverNum {
					width: 100%;
					display: flex;
					align-items: center;
					padding-left: 10px;
					box-sizing: border-box;
					justify-content: center;
					margin-bottom: 8px;

					text {
						margin-right: 5px;
					}
				}

				.relationDriver {
					width: 50%;
					height: 50px;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.relationImg {
					margin-top: 0px;
					width: 30px;
					height: 80%;
				}
			}
		}
	}

	.payView {
		height: 120px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		padding-left: 20px;

		.payView_way {
			width: 140rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			height: 70%;
			margin-right: 20px;
		}

		image {
			width: 50px;
		}
	}

	/deep/ .u-modal__content__text {
		font-size: 20px;
		text-align: center;
	}

	.payBox {
		width: 100%;
		margin-top: 6px;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
</style>
